<template>
  <div class="map">
    <nav-bar>
      <div class="left-map" slot="left" @click="backClick">
        <van-icon name="arrow-left" />
        返回
      </div>
      <div class="center-map" slot="center">不凡</div>
    </nav-bar>
    <div class="map_search">
      <input v-model="ipt" type="text" placeholder="搜索" />
    </div>
    <div id="r-result"></div>
    <div class="bottom">
      <h2>显示当前位置</h2>
      <div id="allmap"></div>
    </div>
    <div class="map-mask">
      <div class="map-item" v-for="item in result.Hr" :key="item.uid">
        <span>{{item.title}} {{item.address | addressFilter}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/navbar/NavBar.vue";

export default {
  components: {
    NavBar,
  },
  data() {
    return {
      ipt: "",
      map: '',
      result: [],
    };
  },
  watch: {
    ipt() {
      let that = this
      var options = {
        onSearchComplete: function (results) {
          if (local.getStatus() == BMAP_STATUS_SUCCESS) {
            console.log(results);
            that.result = results
            console.log(that.result, '哈哈')
          }
        },
      };
      var local = new BMap.LocalSearch(this.map, options);
      local.search(this.ipt);
    },
  },
  filters: {
    addressFilter(val) {
      return '地址 ' + val
    }
  },
  mounted() {
    //iCY1A7zmDY37fGL4eMMCQBIiEnbLTDu0
    // 百度地图API功能
    // var map = new BMap.Map("allmap"); // 创建Map实例
    // map.centerAndZoom("郑州", 15); // 初始化地图,用城市名设置地图中心点
    // // map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);
    // map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
    var map = new BMap.Map("allmap");
    this.map = map
    var point = new BMap.Point(113.774509, 34.776795);
    map.centerAndZoom(point, 18);
    var marker = new BMap.Marker(point); // 创建标注
    map.addOverlay(marker); // 将标注添加到地图中
    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    //  map.enableScrollWheelZoom();
    map.enableScrollWheelZoom(true);
    map.enableScrollWheelZoom();
    var b = new BMap.Bounds(
      new BMap.Point(113.774509, 34.776795),
      new BMap.Point(113.774387, 34.776839)
    );
    var that = this;
    try {
      BMapLib.AreaRestriction.setBounds(map, b);
      var options = {
        onSearchComplete: function (results) {
          // 判断状态是否正确
          // if (local.getStatus() == BMAP_STATUS_SUCCESS) {
          //   var s = [];
          //   for (var i = 0; i < results.getCurrentNumPois(); i++) {
          //     s.push(
          //       results.getPoi(i).title + ", " + results.getPoi(i).address
          //     );
          //   }
          //   document.getElementById("r-result").innerHTML = s.join("<br/>");
          // }
          if (local.getStatus() == BMAP_STATUS_SUCCESS) {
            console.log(results);
          }
        },
      };
      var local = new BMap.LocalSearch(map, options);
      local.search(that.ipt);
    } catch (e) {
      alert(e);
    }
    //
    // var map = new BMap.Map("l-map"); // 创建Map实例
    // map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    // var myKeys = ["不凡", "加油站"];
    // var local = new BMap.LocalSearch(map, {
    //   renderOptions: { map: map, panel: "r-result" },
    //   pageCapacity: 5,
    // });
    // // var local = new BMap.LocalSearch(map, options);
    // local.searchInBounds(myKeys, map.getBounds());
    // local.search(this.ipt);
  },
  methods: {
    backClick() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.map {
  overflow: hidden;
}
.nav-bar {
  font-size: 16px;
  text-align: center;
  color: #f00;
  .left-map {
    .van-icon {
      margin: 0 6px;
    }
    display: flex;
    align-items: center;
  }
}
#allmap {
  width: 375px;
  height: 220px;
}
.bottom {
  position: fixed;
  width: 100%;
  // height: 240px;
  left: 0;
  bottom: 0;
  z-index: 3;
  background-color: #fff;
}
.map_search {
  display: flex;
  justify-content: center;

  input {
    width: 90%;
    padding: 10px 0px 10px 20px;
    display: block;
  }
}
.map-mask {
  position: relative;
  z-index: 1;
  padding: 5px 10px;
  .map-item {
    padding: 10px 0;
  }
}
</style>